<template>
  <div class="page">
    <header>
      <div class="back" @click="$router.back()">返回</div>
    </header>
    <!-- 滑动屏幕 让文字定在header中 -->
    <h3 class="title">{{ cinemaInfo.name }}</h3>
    <!-- 头部区域 -->
    <div class="info">
      <div class="tags">
        <span v-for="item in cinemaInfo.services" :key="item.name">{{ item.name }}</span>
      </div>
      <div class="address">
        <p>
          {{ cinemaInfo.address }}
          <a :href="`tel:${cinemaInfo.telephones}`">打电话</a>
        </p>
      </div>
    </div>
    <!-- 轮播图区域 -->
    <div class="swiper mySwiper" ref="swiperDom">
      <div class="bg">
        <!-- 轮播图背景图 -->
        <div class="bg-img" :style="{backgroundImage:`url(${curMovie.poster})`}"></div>
      </div>
      <div class="swiper-wrapper">
        <div  
        v-for="(item,index) in banners" 
        :key="item.filmId"
        :class="['swiper-slide',{active: activeIndex === index}]"
        >
          <img :src="item.poster" alt="">
        </div>
      </div>
      <div class="triangle">
        <img src="" width="20px" height="10px" alt="">
      </div>
    </div>
    <!-- 电影信息区域 -->
    <div class="movie-info" @click="goMovieDetail()">
      <h4>{{ curMovie.name }} {{ curMovie.grade }}</h4>
      <p>{{ curMovie.category }} | {{ curMovie.director }} | {{ curMovie.actors?.map(v=>v.name).join(' ') }}</p>
    </div>
    <!-- 日期切换 -->
    <div class="date-tab">
      <span 
      v-for="(date,i) in curMovie.showDate" 
      :key="date"
      :class="{active: activeDate === i}"
      @click="changeDate(i)"
      >
      {{ formatDate(date,i) }}
      </span>
    </div>
    <!-- 具体影厅与场次 -->
    <div class="movie-list">
      <div class="movie" v-for="item in movieList" :key="item.schedules">
        <div class="time">
          <p>{{ formatTime(item.showAt) }}</p>
          <p>{{ formatTime(item.endAt) }}</p>
        </div>
        <div class="info">
          <h4>{{ item.filmLanguage }}</h4>
          <p>{{ item.hallName }}</p>
        </div>
        <div class="price">
          {{ item.salePrice }}
        </div>
        <button>购票</button>
      </div>
    </div>
  </div>
</template>




<script>
import axios from 'axios';
// 轮播图
import Swiper from 'swiper'
import 'swiper/css';
// 解析时间插件
import  dayjs  from 'dayjs'
// 一周的数组
const week = ['周日','周一','周二','周三','周四','周五','周六']
// 今天 明天 后天 数组
const dayNow = ['今天','明天','后天']
export default {
  data() {
    return {
      cinemaInfo:{},
      banners:[],
      activeIndex:localStorage.getItem('activeIndex') || 0 ,
      activeDate:0,
      movieList:[]
    }
  },
  methods:{
    // 转换时分
    formatTime(date) {
      return dayjs(date * 1000).format('HH:mm')
    },
    // 日期函数
    formatDate(date,i) {
      // 获取周几    // dayjs(date * 1000):时间戳转成标准时间
      const d = dayjs(date * 1000).day()
      // 在一周数组中找到对应下标
      // console.log(week[d])
      // 如果下标小于3 则 返回具体天数数组
      if(i < 3) {
        return dayNow[i] + dayjs(date * 1000).format('MM月DD日')
      }
      return week[d] + dayjs(date * 1000).format('MM月DD日')
    },
    // 头部区域 接口
    async getCinemaDetail() {
      const res = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          cinemaId:this.$route.params.id,
          k:4151954
        },
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.cinema.info'
        }
      })
      this.$nextTick(()=>{
        this.cinemaInfo = res.data.data.cinema
        // console.log(this.cinemaInfo)
      }) 
      

    },
    // 轮播图  接口
    async getCinemaBanner() {
      const res = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          cinemaId:this.$route.params.id,
          k:4151954
        },
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.film.cinema-show-film'
        }
      })
      this.banners = res.data.data.films
      // console.log(this.banners)
      // 获取电影列表之后调用具体时间的电影场次
      this.getMovieList()
      // 先渲染后初始化配置
      this.$nextTick(()=>{
        this.initSwiper()
      })
    },
    // 播放影厅 与 时间 接口
    async getMovieList() {
      const res = await axios.get('https://m.maizuo.com/gateway',{
        params:{
          filmId: this.curMovie.filmId,
          cinemaId: this.$route.params.id,
          date: this.curMovie?.showDate[this.activeDate],  
          k: 5130215
        },
        headers:{
          'x-client-info':'{"a":"3000","ch":"1002","v":"5.2.1","e":"173088338914639202754887681","bc":"110100"}',
          'x-host':'mall.film-ticket.schedule.list'
        }
      })
      // console.log(res.data)
      this.movieList = res.data.data.schedules
    },
    // 初始化轮播图
    initSwiper() {
      // 轮播图引入  实例并配置
      const swiper = new Swiper(this.$refs.swiperDom,{
        slidesPerView: 4,
        spaceBetween: 16,
        centeredSlides: true,
        // swiper初始化使用on方法
        on: {
          slideChange: swiper => {
            // swiper插件自带的属性
            // console.log(swiper.activeIndex)
            this.activeIndex = swiper.activeIndex
            this.activeDate = 0
            // 切换轮播图  调取影厅
            this.getMovieList()
          }
        }
      });
      // 运行过渡到索引号等于“index”参数的幻灯片
      swiper.slideTo(this.activeIndex)
    },
    // 跳转电影详情
    goMovieDetail() {
      this.$router.push({
        name:'detail',
        params:{
          id:this.curMovie.filmId
        }
      })
    },
    changeDate(i){
      // 切换时间  调取影厅
      this.activeDate = i
      this.getMovieList()
    }
  },
  // 监听计算每次下标变化对应的数据
  computed: {
    curMovie() {
      return this.banners[this.activeIndex] || {}
    }
  },
  created() {
    this.getCinemaDetail()
    this.getCinemaBanner()
  },
  // 监听每一次变大图下标的变化
  watch:{
    activeIndex() {
      localStorage.setItem('activeIndex' , this.activeIndex)
    }
  }
}
</script>

<style lang="scss" scoped>
.page{
  font-size: 14px;
  width: 100%;
}
header{
  height: 50px;
  line-height: 50px;
  padding: 0 15px;
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  .back {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    text-align: center;
    line-height: 50px;
    height: 50px;
    width: 50px;
  }
}
.title {
  text-align: center;
  line-height: 50px;
  height: 50px;
  position: sticky;
  z-index: 99;
  top: 0;
  left: 0;
  background: #FFF;
}
.tags{
  display: flex;
  justify-content: center;
  align-items: center;
  span{
    border: 1px solid #ffb232;
    font-size: 12px;
    color: #ffb232;
    margin: 3px;
    padding: 3px;
  }
}
.address {
  border-bottom: 1px solid #ddd ;
  border-top: 1px solid #DDD;
  line-height: 40px;
  padding-left: 15px;
  p{
    a{
      padding-left: 80px;
    }
  }
}
.mySwiper{
  height: 160px;
  padding: 15px 0;
  background: #CCC;
  position: relative;
  .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    .bg-img{
      width: 100%;
      height: 100%;
      // 虚化
      filter: blur(30px);
    }
  }
  .swiper-slide {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    width: 90px;
    img{
      width: 72px;
      height: 104px;
      vertical-align: bottom;
      transition: 0.3s linear;
    }
  }
  .active {
    img{
      width: 90px;
      height: 130px;
    }

  }
  .triangle {
    position: absolute;
    bottom: 0 ;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 10px;
    img{
      vertical-align: top;
    }
  }
}
.movie-info{
  border-top: 1px solid #CCC;
  text-align: center;
  padding:10px 20px;
  position: sticky;
  top: 50px;
  left: 0;
  background: #fff;
  h4{
    line-height: 40px;
  }
  p{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.date-tab{
  overflow-x: auto;
  overflow-y: hidden;
  height: 50px;
  line-height: 50px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
  &::-webkit-scrollbar {
    display: none;
  }
  span{
    margin: 0 10px;
    text-align: center;
  }
  .active{
    border-bottom: 1px solid orange;
  }
}

.movie {
  display: flex;
  border-bottom: 1px solid #ddd;
  padding: 15px;
  align-items: center;
  .info{
    flex: 1;
    margin: 0 10px;
  }
  .price {
    margin-right: 10px;
  }
}
</style>